import React from 'react';
import {immersedStatusbarHeight} from '../util/webview';

class MobileTopOffset extends React.Component {
	
	constructor(...args) {
		super(...args);
		this.state = {
			topOffset: 0,
			fixTopOffset: false,
		};
	}
	
	render() {
		return (
			<div className={this.props.className} style={{height: this.state.topOffset, width: '100%', ...(this.props.style || {})}}>
				{this.props.children}
			</div>
		);
	}
	
	componentWillMount() {
		immersedStatusbarHeight((height) => {
			this.setState({
				topOffset: height,
				fixTopOffset: true,
			}, () => {
				if(this.props.updateCallBack) {
					this.props.updateCallBack();
				}
			});
		});
	}
	
}

export default MobileTopOffset;